Javascript

O que é?

É uma linguagem de programação client-side usada para controlar e manipular HTML e CSS, basicamente ela trabalha do lado do cliente (navegador) e permite alterar informações na tela com base nas ações do usuário. No entanto, atualmente ela também é muito utilizada para o desenvolvimento back-end.

O Javascript nos permite manipular as informações da página html, permitindo o programador inserir ou remover elementos da tela ou fazer requisições a banco de dados.

Javascript é uma das linguagens mais utilizadas por desenvolvedores web.

Utilizando Javascript no HTML

Uma página html é formada por diversas tags que quando interpretadas pelo navegador são exibidas na tela. Para usarmos Javascript em uma página html basta apenas adicionar a tag <script> dentro do código fonte.

<html>
    <body>
        <script>
            console.log('Aprendendo Javascript!');
        </script>
    </body>
</html>

A tag script pode ser inserida em qualquer parte do código fonte, no entanto é mais indicada colocar no final do documento dentro da tag body. Isto porque ao carregar a página, o navegador carregará tudo o que for Javascript por último, não sobrecarregando a página.

Hora do exemplo!

Crie uma pasta chamado exemplo-js.
Dentro da pasta crie um arquivo chamado index.html.

Insira o código abaixo

<html>
  <head>
      <title>Exemplo Javascript</title>
  </head>

  <body>
    <h1>Exemplo prático Javascrip</h1>

    <p>Observe o console do navegador ===> </p>

  </body>
</html>

Agora insira o código Javascript dentro da tag body, abaixo do conteúdo da página.

<html>
  <head>
      <title>Exemplo Javascript</title>
  </head>

  <body>
    <h1>Exemplo prático Javascrip</h1>

    <p>Aperte <b>F12</b> </p>
    <p>e observe o console do navegador ===> </p>

    <script>
      console.log('Esta frase foi gerada pelo Javascript!')
    </script>
  </body>
</html>

Abra o arquivo index.html com o navegador, aperte F12 e veja a mensagem gerada pelo javascript no console.

No entanto, esse método não é tão eficiente, usar a tag script tem algumas limitações e assim como no css podemos usar um arquivo js separado. Vamos aproveitar a pasta criada no exemplo anterior.

Dentro da pasta exemplo-js crie um arquivo chamado index.js e insira o seguinte código a ele.
```
function exibirMensagem() {
    alert('Testando Javascript!');
}
```

Abra o arquivo index.html e adicione os seguinte código logo após o conteúdo da página

<button onclick="exibirMensagem()">Mensagem</button>

<script src="./index.js"></script>

O código final ficará assim:

<html>
  <head>
      <title>Exemplo Javascript</title>
  </head>

  <body>
    <h1>Exemplo prático Javascrip</h1>

    <button onclick="exibirMensagem()">Mensagem</button>

    <script src="./index.js"></script>

  </body>
</html>

Abra o arquivo com o navegador.

Clique no botão Mensagem e veja a mensagem gerada pelo sistema

Conceitos básicos

Javascript é uma linguagem simples de se aprender, possui muita documentação e exemplos pela internet. Assim como toda linguagem, possui algumas regras e conceitos que são necessários aprender para poder utilizar essa tecnologia.

Variáveis

Variável é um espaço de memória usado para armazenar informações. No Javascript não é necessário tipar a variável, ela pode assumir o tipo dependendo do tipo de valor recebido. Para quem está iniciando essa palavra tipar pode parecer estranha, mas seu conceito é simples. O tipo da variável ao qual nos referimos, nada mais é do que o tipo de informação que ela vai receber, texto, número, verdadeiro ou falso.

Em algumas linguagens, quando queremos armazenar um texto como o nome de uma pessoa por exemplo, devemos informar que essa variável é do tipo texto, assim se tentarmos inserir um número nessa variável, vamos ter um erro.

No Javascript isso não é necessário, a variável vai aceitar o valor, independente do tipo recebido, porém pode apresentar erros futuramente quando você precisar usar esse valor. Por exemplo, você armazenou um valor de texto e depois quer somar ele com outro valor, o resultado pode não ser o esperado.

Hora do exemplo!

Crie um arquivo chamado exemplo-variaveis.html com a estrutura básica do html.

<html>
    <head>
        <meta charset="UTF-8">

        <title>Exemplo Variáveis</title>
    </head>

    <body>

        <div style="text-align: center; margin-top: 50px;">
            <h1 >Exemplo Variáveis</h1>

            <p>Aperte <b>F12</b> para ver os resultados no console! ===></p>
        </div>
    </body>
</html>

Agora vamos colocar esse código Javascript dentro da tag body do documento criado acima.

<script>
    //variáveis
    var nome = 'João';
    var idade = 20;
    var peso = 65.9;
    var humano = true;

    //array
    var pessoas = ['João', 'Maria'];

    //object
    var aluno = {
        nome: 'João',
        idade: 20,
        peso: 65.9,
        humano: true
    }
</script>

Abra o arquivo com o navegador, aperte F12, no console e digite o seguinte.
```
console.log(nome)
```

Aperte a tecla Enter e note que o nome João vai aparecer no console.

Mas de onde veio esse nome?

Bem, ao abrir a página o código Javascript foi carregado, nele declaramos uma variável chamada nome com o valor de 'João'.

var nome = 'João';

No console demos o comando console.log, que imprime o valor da variável indicado dentro dos parênteses.

Agora que você entendeu como funciona, teste as outras variáveis declaradas acima.

console.log(nome)
console.log(idade)
console.log(peso)

Podemos criar variáveis de diversos tipos, texto, números, booleanos(verdadeiro ou falso), arrays(lista) ou objetos. Objeto é uma variável que possui diversos atributos dentro dele, como por exemplo a variável pessoa criada acima, que possui os atributos nome, idade, peso, etc.

Para imprimir o valor de um objeto, precisamos indicar o objeto.atributo que queremos mostrar

console.log(aluno.nome)

Funções

Função é um conjunto de instruções usado para executar alguma tarefa ou retornar algum valor. Usamos funções para separar melhor as rotinas de um sistema, criando funções diferentes para cada tipo operação, facilitando assim a manutenção do código.

Exemplo

<html>
    <head>
        <meta charset="UTF-8">

        <title>Exemplo Funções</title>
    </head>

    <body>

        <div style="text-align: center; margin-top: 50px;">
            <h1 >Exemplo Funções</h1>

            <p>Aperte o botão e troque sua cor!</p>

            <button
                id="botao"
                style="
                    text-align: center;
                    margin-top: 20px;
                    width: 100px;
                    height: 100px;
                    background-color: blue;
                    color: white;
                "
                onclick="alterarCor()"
            >
             Alterar cor
            </button>
        </div>

        <script>
           function alterarCor() {
            var btn = document.getElementById("botao");

            var base = '0123456789ABCDEF';
            var novaCor = '#';
            for (var i = 0; i < 6; i++) {
                novaCor += base[Math.floor(Math.random() * 16)];
            }


            btn.style.backgroundColor = novaCor;
           }
        </script>
    </body>
</html>

Este é o resultado do arquivo acima, ao clicar no botão ele tem sua cor alterada aleatoriamente.

Entrada de dados

O Javascript nos permite gerenciar informações repassadas pelo usuário na tela, assim como podemos alterar os componentes da tela.

Vamos fazer exemplo para entendermos melhor esse recurso. Em nosso exemplo, vamos utilizar o bootstrap para facilitar o desenvolvimento da página e também para termos um layout de estudo mais agradável.

Hora do exemplo!

Vamos montar uma nova estrutura para não misturar os exemplos que já fizemos.

Crie uma pasta chamada javascript.
Dentro dela crie um arquivo chamado index.js.

Agora crie outro arquivo chamado index.html e coloque código abaixo.

<!DOCTYPE html>
<html lang="pt_br">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
            crossorigin="anonymous">

        <title>Exemplo Javascript</title>
    </head>

    <body>
        <div class="container">
            <h1 class="text-center mt-5">Exemplo prático Javascript</h1>
        </div>

        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>

        <script src="./index.js"></script>
    </body>
</html>

Neste exemplo estamos montando uma página HTML5.

As tag script foram usadas para importar o bootstrap e o arquivo index.js.

Agora vamos criar uma div pra ajustar o conteúdo de nossa página. Insira isso logo abaixo do título com a tag h1.
```
<div class="row justify-content-center mt-5">
    // aqui vai o conteúdo
</div>
```

O próximo passo é inserir um componente para receber o nome e um botão para adicioná-lo à lista.

<div class="row justify-content-center mt-5">
    <div class="col-6">
        <div class="form-floating mb-3">
          <input type="text" class="form-control" id="nome" placeholder="Nome">
          <label for="floatingInput">Nome</label>
        </div>

        <div class="d-grid gap-1">
          <button class="btn btn-primary" type="button">Salvar</button>
        </div>
    </div>
</div>

Agora vamos inserir outra div com a classe row, criando uma nova linha para receber a lista de nomes.

<div class="row justify-content-center mt-3">
    <div class="col-6">
        <b>Lista de nomes</b>

        <ul id="lista" class="list-group list-group-flush list-group-numbered" />
    </div>
</div>

A tela está pronta, no entanto o botão Salvar ainda não executa nenhuma função, vamos criar essa função no arquivo index.js.

function adicionarNome() {
    var nome = document.getElementById("nome")

    var novoItem = document.createElement("li");

    novoItem.classList.add("list-group-item");

    var text = document.createTextNode(nome.value);

    novoItem.appendChild(text);

    var lista = document.getElementById("lista");

    lista.appendChild(novoItem);
}

Agora, só falta adicionar no evento onclick do botão a função criada.

<button class="btn btn-primary" type="button" onclick="adicionarNome()">Salvar</button>

Pronto, agora você pode digitar um nome, clicar no botão Salvar, e o nome é adicionado na lista.

Código completo html.

<!DOCTYPE html>
<html lang="pt_br">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous">

    <title>Exemplo Javascript</title>
  </head>

  <body>
    <div class="container">
      <h1 class="text-center mt-5">Exemplo prático Javascript</h1>

      <div class="row justify-content-center mt-5">
        <div class="col-6">
          <div class="form-floating mb-3">
            <input type="text" class="form-control" id="nome" placeholder="Nome">
            <label for="floatingInput">Nome</label>
          </div>

          <div class="d-grid gap-1">
            <button class="btn btn-primary" type="button" onclick="adicionarNome()">Salvar</button>
          </div>
        </div>
      </div>

      <div class="row justify-content-center mt-3">
        <div class="col-6">
          <b>Lista de nomes</b>

          <ul id="lista" class="list-group list-group-flush list-group-numbered" />
        </div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"></script>

    <script src="./index.js"></script>
  </body>
</html>

Como pudemos observar, aprender a programar pode ser fácil e divertido. Você pode iniciar seus estudos com conceitos e exemplos mais simples e depois ir aos poucos aprofundando seus conhecimentos.

Links interessantes

Veja mais links interessantes sobre Javascript!

Curso Javascript Completo -Jhonatan de Souza . Devaprender

Javascript para Iniciantes . Cod3r Cursos